<template>
	<view class="tabbar home">
		<Header></Header>
		<view class="content">
			<view class="image_box" v-for="item in list" @click="fiterRouter(item)">
				<view class="cover" v-if="item.name.length">
					<text v-for="text in item.name">{{text}}</text>
				</view>
			</view>
		</view>
		<Footer active="0"></Footer>
	</view>
</template>

<script>
	import {
		userIsopen
	} from '@/request/api.js';
	import {
		home
	} from '@/utils/menu.js';
	import Header from "@/components/tabbar/Header.vue";
	import Footer from "@/components/tabbar/Footer.vue";
	export default {
		components: {
			Header,
			Footer
		},
		data() {
			return {
				list: home
			}
		},
		methods: {
			async fiterRouter(item) {
				let res = await userIsopen();
				let key = item.key;
				let open = res[key] ?? true;
				let url = open ? item.url : "";
				this.router(url);
			}
		}
	}
</script>
<style scoped lang="scss">
	* {
		font-family: LiSu;
	}

	.home {
		padding-bottom: 110rpx;
		overflow-x: auto;

		.content {
			width: 2000rpx;
			height: 1624rpx;
			background: url(#{$baseImageUrl}/home/home_bg.png) no-repeat;
			background-size: 100% 100%;
			position: relative;

			.image_box {
				box-sizing: border-box;
				display: flex;
				position: absolute;
				z-index: 2;

				&:nth-child(1) {
					width: 507rpx;
					height: 300rpx;
					padding-top: 32rpx;
					padding-right: 134rpx;
					justify-content: flex-end;
					left: 0rpx;
					top: 369rpx;
				}

				&:nth-child(2) {
					width: 330rpx;
					height: 240rpx;
					padding-right: 70rpx;
					justify-content: flex-end;
					left: 386rpx;
					top: 654rpx;
				}

				&:nth-child(3) {
					width: 320rpx;
					height: 460rpx;
					padding-top: 85rpx;
					padding-left: 157rpx;
					left: 0rpx;
					top: 735rpx;
				}

				&:nth-child(4) {
					width: 320rpx;
					height: 300rpx;
					padding-left: 110rpx;
					left: 0rpx;
					top: 1168rpx;
				}

				&:nth-child(5) {
					width: 600rpx;
					height: 475rpx;
					padding-top: 127rpx;
					padding-left: 270rpx;
					left: 322rpx;
					top: 911rpx;
				}

				&:nth-child(6) {
					width: 376rpx;
					height: 300rpx;
					padding-top: 100rpx;
					padding-right: 70rpx;
					justify-content: flex-end;
					left: 657rpx;
					top: 380rpx;
				}

				&:nth-child(7) {
					width: 533rpx;
					height: 300rpx;
					padding-top: 80rpx;
					padding-left: 267rpx;
					right: 393rpx;
					top: 388rpx;
				}

				&:nth-child(8) {
					width: 523rpx;
					height: 367rpx;
					padding-top: 110rpx;
					padding-left: 167rpx;
					right: 590rpx;
					top: 679rpx;
				}

				&:nth-child(9) {
					width: 405rpx;
					height: 300rpx;
					right: 0rpx;
					top: 646rpx;
				}

				&:nth-child(10) {
					width: 511rpx;
					height: 328rpx;
					right: 60rpx;
					top: 946rpx;
				}

				&:nth-child(11) {
					width: 428rpx;
					height: 403rpx;
					padding-top: 214rpx;
					padding-left: 160rpx;
					left: 533rpx;
					top: 49rpx;
				}

				&:nth-child(12) {
					width: 428rpx;
					height: 353rpx;
					padding-top: 70rpx;
					padding-left: 180rpx;
					left: 300rpx;
					bottom: 0rpx;
				}

				&:nth-child(13) {
					width: 428rpx;
					height: 353rpx;
					padding-top: 70rpx;
					padding-left: 180rpx;
					right: 520rpx;
					bottom: 240rpx;
				}

				.cover {
					width: 60rpx;
					height: 180rpx;
					color: #000000;
					font-size: 32rpx;
					font-weight: 400;
					background: url(#{$baseImageUrl}/home/type.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>